<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数值</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.lineId" filterable clearable placeholder="请选择数据" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>小数点位</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.decimal" class="miniinput" type="number" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>显示值</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.tableData.isShowValue"></el-checkbox>
                    <span style="margin-right:10px;">换行</span>
                    <el-checkbox v-model="obj.tableData.isBreakLine"></el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数值后缀</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="obj.tableData.unit" type="text" style="width: 64px;" />
                    <input v-model.number="obj.tableData.textSize" style="width: 40px;margin:0 10px;" type="number" />
                    <el-color-picker popper-class="mycolorview" v-model="obj.tableData.textColor" size="small" show-alpha
                        :predefine="predefineColors" @active-change="setColorChange(obj.tableData, 'textColor', $event)">
                    </el-color-picker>
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.textFontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData, 'textFontWeight')"><i
                                class="iconfont icon-zitijiacu"></i></div>
                        <div :class="['fontitem', { 'active': obj.tableData.textFontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData, 'textFontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>数值字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.valSize" class="miniinput" type="number" />
                    <el-color-picker v-model="obj.tableData.valColor" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.tableData, 'valColor', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.valFontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData, 'valFontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.tableData.valFontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData, 'valFontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>刷新间隔</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                        @change="reloadTimeChangeHandle" />
                    <span>秒</span>
                </el-col>
            </el-row>
            <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                :setFontStyle="setFontStyle" :isShowCheckout="false"></title-form>
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "NewmapForm",
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        setFontStyle: Function,
        setColorChange: Function,
        columnData: Array,
        tableSelectChange: Function,
        reloadTimeChangeHandle: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            collapseActives: ['1', '2', '3', '4', '5'],
        }
    },
    components: {
        TitleForm: () => import('../mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
        EventForm: () => import('../mixin/EventForm.vue'),
    },
    methods: {

    }
}
</script>

<style scoped></style>
